<div class="container">
  <div class="view-module-header">
    <div class="navbar-search">
      <div class="search-l">
        <div class="example-input">
          <nz-input-group [nzSuffix]="suffixTemplate" nzSize="default">
            <input nz-input placeholder="角色名称" [(ngModel)]="params.name" (change)="onSearch()" />
          </nz-input-group>
          <ng-template #suffixTemplate>
            <i class="iconfont" [ngClass]="params.name.length > 0 ? 'icon-close-circle-line' : ''"
              style="font-size: 10px; color: #ddd;" (click)="clear()"></i>
          </ng-template>
        </div>
      </div>
    </div>
  </div>
  <div class="view-module-container">
    <nz-table #rowSelectionTable [nzFrontPagination]="false" [nzData]="listOfData" [nzLoading]="loading"
      [nzTotal]="total" [(nzPageIndex)]="params.pageIndex" [(nzPageSize)]="params.countOfPage"
      [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" (nzPageIndexChange)="changePageIndex($event)"
      (nzPageSizeChange)="changePageSize($event)">
      <thead>
        <tr>
          <th>名称</th>
          <th>创建时间</th>
          <th>所属单位</th>
          <th>状态</th>
          <th [nzAlign]="'center'">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of listOfData; let i=index">
          <td>{{item.name}}</td>
          <td>{{item.createTime | date:'yyyy-MM-dd HH:mm'}}</td>
          <td>{{item.organizationName}}</td>
          <td>{{item.status == 0 ? '启用' : '禁用'}}</td>
          <td [nzAlign]="'center'">
            <a nz-button nzType="link" (click)="addEditData(item.id, '', 'details')">详情</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="addEditData(item.id, item.name, 'up')">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="clickStatus(item)">{{item.status == 0 ? '禁用' : '启用'}}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzDanger nzType="link" (click)="delListItem(item.id, item.name, i)">删除</a>

          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <nz-modal [(nzVisible)]="isRoleVisible" nzTitle="添加/修改角色" (nzOnCancel)="isRoleVisible = false">
    <div nz-row>
      <div nz-col nzSpan="2">
        <p class="mt6">名称</p>
      </div>
      <div nz-col nzSpan="12" class="fl">
        <input [(ngModel)]="roleParams.name" nz-input placeholder="输入角色" nzSize="default" />
      </div>
    </div>
    <div class="box-show role-box">
      <div *ngFor="let item of permitssList">
        <div class="role-name">{{ item.groupName }}
          <label class="fr" nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="checkAllLog(item)">
            全选/全不选
          </label>
        </div>
        <div class="role-jurisdiction">
          <div nz-row>
            <div nz-col nzSpan="5" *ngFor="let item1 of item.value">
              <label nz-checkbox nz-checkbox [(nzChecked)]="item1.checked" [(ngModel)]="item1.checked"
                (ngModelChange)="checkboxLog(item1, item)">{{ item1.permitName }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="isRoleVisible = false">取消</button>
      <button nz-button nzType="primary" (click)="confirmInfo()">确认</button>
    </div>
  </nz-modal>
</div>